<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>角色管理</title>
    <script src="../js/vue/dist/vue.min.js"></script>
    <script src="../js/element-ui/lib/index.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/web-util.js"></script>
    <link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
    <style type="text/css">
        .el-row{
            margin-bottom: 20px;
        }
        .el-tree{
            border: 1px solid #DCDFE6;
            margin-right: 5px;
        }
        .el-main{
            padding: 0;
        }
        body{
            height: 85%;
            margin: 10px;
            background: #ffffff;
        }
    </style>
</head>
<body>
<div id="app">
    <template>
        <el-container >
            <el-main>
                <el-tabs type="border-card">
                    <el-tab-pane label="角色列表">

                        <el-row>
                            <el-col :span="24">
                                <el-button type="primary" icon="el-icon-plus" @click="showRoleDialog" size="small">新增角色</el-button>
                            </el-col>
                        </el-row>

                        <el-row>
                            <el-col :span="24">
                                <el-table ref="roleTable" v-loading="loading" :data="tableData" row-class-name="row_padding" header-row-class-name="head_padding" highlight-current-row border style="width: 100%">
                                    <el-table-column label="角色名称" prop="roleName"  fixed="left" header-align="center" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="操作人" prop="updateUser"   header-align="center" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="操作时间" prop="updateTime" align="center" show-overflow-tooltip></el-table-column>
                                    <el-table-column label="状态" prop="businessFlag" align="center">
                                        <template slot-scope="scope">
                                            <span v-html="showBusinessStatusImage(scope.row.businessFlag)" @click="updateBusinessStatus(scope.row)"></span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" fixed="right" header-align="center" align="center">
                                        <template slot-scope="scope">
                                            <el-button @click.native.prevent="showEditRoleDialog(scope.row)" type="text" size="small">
                                                编辑
                                            </el-button>
                                            <el-button @click.native.prevent="deleteRole(scope.row)" type="text" size="small">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>

                        <el-dialog title="角色详情" :visible.sync="roleFormVisible" @close="handleDialogClose" width="600px" >
                            <el-form ref="roleForm" :model="roleForm" :rules="roleFormRules" label-width="150px" label-position="right">
                                <el-form-item label="角色名称" prop="roleName" required>
                                    <el-input v-model="roleForm.roleName" placeholder="请输入角色名称" style="width: 300px" :maxlength="100" :disabled="formRead" ></el-input>
                                </el-form-item>
                                <el-form-item label="备注">
                                    <el-input v-model="roleForm.remark" type="textarea" :rows="3" placeholder="请填写角色相关的描述" style="width: 300px"  :maxlength="50" :disabled="formRead"></el-input>
                                </el-form-item>

                                <el-form-item label-width="0" style="text-align: center">
                                    <el-button type="primary" @click="saveRole()" size="small">保存</el-button>
                                </el-form-item>
                            </el-form>

                        </el-dialog>
                    </el-tab-pane>

<!--                    <el-tab-pane label="角色用户">-->
<!--                        <el-aside width="250px">-->
<!--                            <el-tree :data="roleTreeData" ref="roleTree" :props="treeProps" @node-click="handleNodeClick" node-key="roleCode"-->
<!--                                     :expand-on-click-node="false" default-expand-all></el-tree>-->
<!--                        </el-aside>-->
<!--                    </el-tab-pane>-->
                </el-tabs>

            </el-main>
        </el-container>
    </template>
</div>
</body>
<script src="RoleList.js" type="text/javascript"></script>
</html>

